<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>
<body>

    <div class="layui-fluid" style="padding: 10px">
        <div class="layui-card">
            <div class="layui-card-header">图片资源列表</div>
            <div class="layui-card-body">
                <table id="imageList" lay-filter="imageList"></table>
            </div>
        </div>
    </div>

    <script src="../res/layui/layui.js"></script>
    <script>
        layui.use(function(){
            var table = layui.table;
            var layer = layui.layer;
            var $ = layui.$;

            //数据表格渲染
            table.render({
                elem: '#imageList'
                ,url: 'http://127.0.0.1:8080/image/list'
                ,cellMinWidth: 80
                ,page:{
                    limit:5,
                    limits:[5,10,15,20]
                }
                ,cols: [[
                    {type:'checkbox'}
                    ,{type:'numbers', title:'ID', width:80}
                    ,{field:'name', title:'名称'}
                    ,{title:'预览', templet: function(d){
                        return '<img src="'+d.url+'" style="width: 100px; height: 100px;" lay-event="preview"/>'
                    }}
                    ,{field:'url', title:'地址'}
                    ,{title:'创建时间', templet: '<div>{{layui.util.toDateString(d.createTime,"yyyy-MM-dd HH:mm:ss")}}</div>'}
                    ,{field:'size', title:'大小'}
                    ,{title:'操作',templet:'#toolbar',width: 320}
                ]]
            })

            // 单元格工具事件绑定
            table.on('tool(imageList)',function(obj){
                var data = obj.data;
                var layEvent = obj.event
                if(layEvent === 'copy'){
                    //复制图片地址到剪切板
                    navigator.clipboard.writeText(data.url).then(function(){
                        layer.msg('复制成功')
                    })
                }else if(layEvent === 'delete'){
                    layer.confirm('确定删除该图片吗？',function(){
                        $.ajax({
                            url:'http://127.0.0.1:8080/image/'+data.id,
                            type:'DELETE',
                            success:function(res){
                                if(res.code === 0){
                                    table.reload('imageList')
                                    layer.msg(res.msg)
                                }else{
                                    layer.alert(res.msg,{icon:2})
                                }
                            }
                        })
                    })
                }else if(layEvent === 'preview'){
                    //图片预览
                    layer.photos({
                        photos: { // 图片层的数据源
                            "data": [   // 相册包含的图片，数组格式
                                {
                                    "alt": data.name,
                                    "pid": data.id, // 图片id
                                    "src": data.url // 原图地址
                                }
                            ]
                        },
                        toolbar:false, //不显示顶部工具栏
                        footer:false, //不显示底部图片详情
                    });
                }else if(layEvent === 'rename'){
                    layer.prompt({
                        formType: 0,
                        value: data.name,
                        title: '重命名文件'
                    }, function(value, index, elem){
                        // 构建数据对象
                        var mofidyData = {
                            id: data.id,
                            name: value
                        }
                        //发送Ajax请求修改数据
                        $.ajax({
                            url:'http://127.0.0.1:8080/image',
                            type:'PUT',
                            contentType:'application/json',
                            data:JSON.stringify(mofidyData),
                            success:function(res){
                                layer.close(index); // 关闭层
                                if(res.code === 0){
                                    table.reload('imageList')
                                    layer.msg(res.msg)
                                }else{
                                    layer.alert(res.msg,{icon:2})
                                }
                            }
                        })
                    });
                }
            })
        })
    </script>

    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-bg-blue layui-btn-xs" lay-event="copy">
                <i class="layui-icon layui-icon-file"></i>
                复制图片地址
            </button>
            <button class="layui-btn layui-bg-orange layui-btn-xs" lay-event="rename">
                <i class="layui-icon layui-icon-edit"></i>
                重命名
            </button>
            <button class="layui-btn layui-bg-red layui-btn-xs" lay-event="delete">
                <i class="layui-icon layui-icon-delete"></i>
                删除图片
            </button>
        </div>
    </script>
</body>
</html>